<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>知行合壹无缝滚动</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            border: 0;
            list-style: none;
        }

        body {
            background: #000;
        }

        .box {
            width: 600px;
            height: 350px;
            border: 1px solid #f40;
            margin: 50px auto;
            overflow: hidden;
        }

        .box ul {
            width: 9999px;
            position: relative;
        }

        .box ul li {
            float: left;
        }

        .box ul li img {
            width: 600px;
            height: 350px;
        }
    </style>
    <script src="js/jquery.min.3.4.1.js"></script>
    <script>

        $(function () {

            /*
            * 1.添加定时器,让ul进行向左移动
            * 2.鼠标移入时,停止动画,当前为高亮,其它的兄弟变暗
            * 3.鼠标移出时,开始动画.
            * */

            /*1.定义属性记录当前的位置*/
            var leftX = 0;
            var timer = null;
            /*
            * 滚动图片
            * */
            function scrollPic() {
                timer = setInterval(function () {
                    if (( $('ul').children().length - 1) * -600 === leftX) { // (oul.children.length - 1) * -600 最大滚动距离
                        // 重置oul 的位置
                        $('ul').css({ left: 0});
                        leftX = 0;
                    }
                    // 每次 递减 4个px 的距离
                    leftX -= 4;
                    // oul 的 left 值
                    $('ul').css({ left: leftX });
                }, 15);
            }
            scrollPic();

            /*2.处理鼠标移入事件*/
            $('li').hover(function () {
                /*停止定时器*/
                clearInterval(timer);
                /*移入时调用*/
                $(this).stop().fadeTo(300, 1).siblings().stop().fadeTo(300, 0.3);
            }, function () {
                /*移出时调用*/
                /*把所有设置为不透明*/
                $('li').stop().fadeTo(300, 1);
                /*开始滚动*/
                scrollPic();
            });
        });

    </script>
</head>

<body>


    <div class="box">

        <ul>
            <li><img src="images/0.jpg" alt=""></li>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <!--不要出现黑边-->
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/0.jpg" alt=""></li>
        </ul>

    </div>




</body>

</html>